<template>
	<view class="container">
		<view class="merchant-view" v-if="(dataList && dataList.length>0)">
			<view v-for="(item,index) in dataList" class="merchant-item">
				<view>
					<image :src="item.mainImage" style="width:180rpx;height: 160rpx;border-radius: 14rpx;">
					</image>
				</view>
				<view style="flex-grow: 1;margin-left: 20rpx;">
					<view style="font-weight: 700;font-size: 32rpx;font-family: 微软雅黑;margin-bottom: 14rpx;">
						{{item.name}}
					</view>
					<view
						style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 14rpx;">
						<u-icon name="shopping-cart-fill"
							label="美团" size="16" labelSize="14"></u-icon>
						<u-icon @click="toMap(item)" name="map" :label="'距离'+(item.distance/1000).toFixed(2)+'km'" size="12" labelSize="12"></u-icon>
					</view>
					<view style="display: flex;margin-bottom: 20rpx;">
						<view style="background: #f56c6c;color:#fff;padding:4rpx 10rpx;border-radius: 14rpx;font-size: 26rpx;font-family: 微软雅黑;">
							{{item.posName}}</view>
						<view style="margin-left: 10rpx;background: #ff983c;color:#fff;padding:4rpx 10rpx;border-radius: 14rpx;font-size: 26rpx;font-family: 微软雅黑;">
							{{item.storeTime}}</view>
					</view>
					<view style="color:#999;font-size: 26rpx;">
						<!-- 地址轮播 -->
						<u-notice-bar :text="[item.posName,item.posAddress]" mode="" direction="column" color="#999" bgColor="#fff" icon="">
						</u-notice-bar>
					</view>
					<view style="display: flex;align-items: center;position: relative;">
						<view style="font-size: 25rpx;font-weight: bold;margin-left: 6rpx;"><label>评分：<label
									style="color:#ff983c;margin:0rpx 6rpx">{{item.score}}</label>分</label>
						</view>
						<view
							:style="{'background':'#ff983c','color':'#fff'}"
							class="button-view" @click="toStore(item)">
							去看看
						</view>
						<view style="padding:10rpx 26rpx;border-radius: 50rpx;">
		
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;" v-else>
			<image :src="nodata" style="width:320rpx;height: 320rpx;" mode="aspectFill"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import navigateType from '@/pages/marketer/marketer.js'
	export default {
		name:"store-list",
		props:{
			dataList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				config:{
					plateformDivideMoney:20
				},
				nodata:'@/statis/logo.png',
			};
		},
		methods:{
			toStore(item){
				this.$tab.navigateTo("/pages/marketer/marketer-manage?storeId="+item.id+"&navigateType="+navigateType.outerNavigate)
			},
			toMap(item){
				this.$tab.navigateTo("/pages/geo-location/commonmap?storeId="+item.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
	}
	.merchant-view {
		margin-top: 20rpx;
		// height:700rpx;
	}

	.merchant-item {
		position: relative;
		width: 90%;
		padding: 30rpx 20rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 24rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.merchant-top {
		width: 96%;
		display: flex;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.merchant-left {
		width: 25%;
		text-align: center;
	}

	.merchant-header {
		width: 150rpx;
		height: 150rpx;
		// border-radius: 10rpx;
	}

	.merchant-right {
		width: 75%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.merchant-title {
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 32rpx;
	}

	.merchant-tag {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.merchant-addr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #888;
	}

	.merchant-info {
		display: flex;

	}

	.merchant-bottom {
		width: 94%;
		border-top: 2rpx solid #eee;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0rpx;
		margin: 0 auto;
	}

	.merchant-bottom label {
		font-size: 28rpx;
		color: #888;
	}

	.template-view {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.template-item {
		background-repeat: no-repeat;
		background-size: cover;
		width: 350rpx;
		height: 175rpx;
		border-radius: 14rpx;
	}

	.water-view {
		position: absolute;
		right: 50rpx;
		top: 30rpx;
		border: 10rpx solid red;
		border-radius: 50%;
		text-align: center;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 0.3;
		color: red;
		font-weight: bold;
		transform: rotate(25deg);
	}

	.button-view {
		padding: 14rpx 30rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;
		background: #eee;
		color: #999;
	}
</style>